<template>
  <div class='login'>
    <div class="login-wrapper boxCardBg">
      <h2>Vue3动态路由Demo</h2>
      <el-input
        class="email"
        placeholder="请输入邮箱"
        :prefix-icon="Message"
        v-model="state.email"></el-input>

      <el-input class="password"
        placeholder="请输入密码"
        type="password"
        show-password
        :prefix-icon="Lock"
        v-model="state.password">
      </el-input>

      <el-button type="primary" @click="handleLogin">
        <el-icon
          v-if="state.isLoading"
          class="load"
          size="18"
          style="margin-right:5px;">
          <Loading />
        </el-icon>
        登录
      </el-button>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { Lock, Message, Loading } from '@element-plus/icons-vue'
// import { ElMessage } from 'element-plus'
import boot from '../config/third-plugins/loadRoute'

interface IState {
  email: string
  password: string
  isLoading:boolean
}
const state = reactive<IState>({
  email: "",
  password: "",
  isLoading: false
})

const router = useRouter()

const handleLogin = () => {
  state.isLoading = true
  if (localStorage.getItem('tokenName') + '_token') {
    localStorage.setItem(localStorage.getItem('tokenName') + '_token', '')
    localStorage.setItem('userName', '')
  }

  switch (state.email) {
    case "admin":
      localStorage.setItem('routes', JSON.stringify([
          {
            path: "/P1index",
            belongto: "/P1index"
          },
          {
            path: "/P2index",
            belongto: "/P2index"
          },
          {
            path: "/P3index",
            belongto: "/P3index"
          },
          {
            path: "/P4_1",
            belongto: "/P4index"
          },
          {
            path: "/P4_2",
            belongto: "/P4index"
          },
          {
            path: '/Jurisdiction',
            belongto: '/Jurisdiction'
          },
          {
            path: '/Sort',
            belongto: '/Sort'
          }
        ])
      )
      break
    case "user":
      localStorage.setItem('routes', JSON.stringify([
          {
            path: "/P1index",
            belongto: "/P1index"
          },
          {
            path: "/P2index",
            belongto: "/P2index"
          },
          {
            path: "/P4_2",
            belongto: "/P4index"
          }
        ])
      )
      break
  }

  boot()

  router.push('Home')
}
</script>

<style scoped lang='scss'>
.login {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../assets/img/bigbg.jpg');
  background-size: cover;

  .login-wrapper {
    width: 400px;
    height: 280px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 10px #ccc;
    padding: 0 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;

    h2 {
      text-align: center;
      margin-bottom: 20px;
    }

    .password {
      margin: 20px 0;
    }

    .load {
      animation: rotate 2s linear infinite;
    }

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    :deep(.el-input),:deep(.el-button){
      height: 40px;
    }
  }
}
</style>
